/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/15
 */

import React from 'react';
import styles from './List.less';
import { Button, Table, Modal } from 'antd';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';

const confirm = Modal.confirm;

export default class List extends React.Component {

  static propTypes = {
    onDeleteItem: PropTypes.func,
    onEditItem: PropTypes.func,
  };

  _getColumnConfig () {

    const { onDeleteItem, onEditItem } = this.props;

    const btnClickHandler = (record, handleType) => {
      handleType === 'edit' && onEditItem(record);
      handleType === 'delete' && confirm({
        title: '你确定要删除本条记录？',
        onOk() {
          onDeleteItem(record.id, record);
        },
      });
    };

    return [

      {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        width: 69,
        className: styles.avatar,
        render: text => <img src={text} alt={'avatar'} width={'44'} />,
      },
      {
        title: '团员ID',
        dataIndex: 'memberNO',
        key: 'memberNO',
        render: (text, record) => <Link to={`member-management/profile/${record.id}`}>{text}</Link>,
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: '部门',
        dataIndex: 'department.name',
        key: 'department_name',
      },
      {
        title: '角色',
        dataIndex: 'roles',
        key: 'role_name',
      },
      {
        title: '职位',
        dataIndex: 'job',
        key: 'job',
      },
      {
        title: '操作',
        key: 'operation',
        width: 150,
        render: (text, record) => {
          return (<div className={styles.operationArea}>
            <Button type="primary" size={'small'} onClick={() => btnClickHandler(record, 'edit')}>编辑</Button>
            <Button type="danger" size={'small'} onClick={() => btnClickHandler(record, 'delete')}>删除</Button>
          </div>);
        },
      },

    ];
  }

  render () {
    const { onDeleteItem, onEditItem, location, ...tableProps } = this.props;
    return (
      <div>
        <Table
          {...tableProps}
          columns={this._getColumnConfig()}
          bordered
          className={classNames({ [styles.table]: true})}
          simple
          rowKey={record => record.id}
        />
      </div>
    );
  }
}
